<template>
    <div class="header">
        <div class="address_map" @click="$router.history.push('/address')">
            <svg class="icon iconff" aria-hidden="true">
                <use xlink:href="#icon-hongdenglong"></use>
            </svg>
            <span>{{$store.state.position.formattedAddress}}</span>
            <svg class="icon iconff" aria-hidden="true">
                <use xlink:href="#icon-suona"></use>
            </svg>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HomeHeader",
        mounted(){
            this.$store.commit("CHANGE_ADDRESS","定位中……");
            const _this = this;
            AMap.plugin('AMap.Geolocation', function() {
                var geolocation = new AMap.Geolocation({
                    // 是否使用高精度定位，默认：true
                    enableHighAccuracy: true,
                    // 设置定位超时时间，默认：无穷大
                    timeout: 10000,
                })

                geolocation.getCurrentPosition()
                AMap.event.addListener(geolocation, 'complete', onComplete)
                AMap.event.addListener(geolocation, 'error', onError)

                function onComplete (data) {
                    // data是具体的定位信息
                    console.log(data.formattedAddress);
                    _this.$store.commit("CHANGE_ADDRESS",data.formattedAddress);
                }

                function onError (data) {
                    // 定位出错
                }
            })
        }

    }
</script>

<style scoped>
    .iconff{
        width: 1.7em;
        height: 1.7em;
        z-index: 1;
    }
    .header .address_map {
        color: #fff;
        font-weight: bold;
    }

    .address_map i {
        margin: 0 3px;
        font-size: 18px;
    }

    .address_map span {
        display: inline-block;
        width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>